
$PrimaryColor:#0052d9; // 按钮
$SecondColor:#d4e3fc;

$PrimaryTextColor:#2c3e50;
$SecondTextColor:#5e6d82;  

$white:#ffffff;
$grey_1:#eeeeee;
$grey_2:#c5c5c5;
$grey_3:#a6a6a6;
$blue:#0052d9;
$red:#e34d59;
$orange:#ed7b2f;
$green:#00a870;
$purple:#834ec2;
$yellow:#ebb105;
$pink:#ed49b4;
$skyblue:#0594fa;

$large:20px;
$medium:16px;
$small:14px;
$mini:12px;

$fontFamily_1:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
$fontFamily_2:"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Source Han Sans CN,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol";
$fontFamily_3:"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol";


$BackgroundColor:var(--el-bg-color);
$SecondBackgroundColor:var(--el-bg-color-second);
$TextColor:var(--el-text-color);
$ShadowColor:var(--el-shadow-color);
$PageBackgroundColor:var(--el-bg-color-page);
$MaskBackgroundColor:var(--el-bg-color-mask);
$SecondTextColor:var(--el-text-color-second);

//不换行
@mixin no-wrap() {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

// 保留一行
@mixin ellipsis($lines: 1) {
    overflow:hidden;
    text-overflow:ellipsis;
    // white-space: nowrap;
    display:-webkit-box;
    -webkit-line-clamp:$lines;
    -webkit-box-orient:vertical;
    /* 这两个在技术上是一样的, 为了兼容了浏览器两个都加上 */
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
    /* 这个的使用在web-kit中有些危险，他可能会阶段所有东西 */
    word-break: break-all;
    /* Instead use this non-standard one: */
    // word-break: break-word;

    /* 如果浏览器支持的话增加一个连接符(Blink不支持) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

//透明度
@mixin alpha($num) {
    filter: alpha(opcity=$num*100);
    -moz-opacity: $num;
    -khtml-opacity: $num;
    opacity: $num;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$num*100);
}

//阴影
@mixin box-shadow($x:0px,$y:0px,$size:5px,$color:$grey_2,$opacity:0.8) {
    $red:red($color);
    $green:green($color);
    $blue:blue($color);
    box-shadow: $x $y $size rgba($red, $green,$blue,$opacity);
    -webkit-box-shadow: $x $y $size rgba($red, $green,$blue,$opacity);
    -moz-box-shadow: $x $y $size rgba($red, $green,$blue,$opacity);
}

//圆角
@mixin border-radius($radius) {
    border-radius: $radius;
    -ms-border-radius: $radius;
    -moz-border-radius: $radius;
    -webkit-border-radius: $radius;
}

//全屏展示
@mixin full() {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

//也是全屏
@mixin full-block() {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

//根据固定宽高居中展示
@mixin center-midddle($width,$height) {
    position: absolute;
    left: 50%;
    top: 50%;
    width: $width;
    height: $height;
    margin-left: -$width/2;
    margin-top: -$height/2;
}

//定位在中间
@mixin center() {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}


//模糊，不是毛玻璃效果
@mixin blur($width:10px) {
    -webkit-filter: blur($width);
    -moz-filter:blur($width);
    -ms-filter: blur($width);
    filter: blur($width);
}

/* chrome & safari 浏览器 */
.scrollbar::-webkit-scrollbar {  /* 滚动条整体部分 */
    width:5px;
    margin: 2px 20px 2px 4px;
}
.scrollbar::-webkit-scrollbar-button { /* 滚动条两端的按钮 */
    width:0px;
    height: 0px;
    background-color: #ededed;
}
.scrollbar::-webkit-scrollbar:horizontal {
    height:5px;
    margin-bottom:2px;
}
.scrollbar::-webkit-scrollbar-track {  /* 外层轨道 */
    border-radius: 0px;
}
.scrollbar::-webkit-scrollbar-track-piece {  /*内层轨道，滚动条中间部分 */
    background-color: $PageBackgroundColor;
    border-radius: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {  /* 滑块 */
    width:5px;
    border-radius: 10px;
    background: #bfbfbf56;
}
.scrollbar::-webkit-scrollbar-corner { /* 边角 */
    width: 5px;
    background-color: $PageBackgroundColor;
}
.scrollbar::-webkit-scrollbar-thumb:hover { /* 鼠标移入滑块 */
    background: #b2b2b2af;
    cursor: pointer;
}

